<template>
    <div class="applicationManage">
        <el-row>
            <el-col class="param">
                <el-select v-model="queryParams.pageSize" placeholder="5">
                    <el-option v-for="item in pageSizes" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <span>每页记录</span>
                <el-input placeholder="查询平台名称" v-model="queryParams.platformName" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </el-col>
            <el-col class="table">
                <el-table :data="platforms" :stripe="false" :row-class-name="tableRowClassName">
                    <el-table-column type="index"></el-table-column>
                    <el-table-column prop="platformName" label="平台名称"></el-table-column>
                    <el-table-column prop="platformCode" label="平台code"></el-table-column>
                    <el-table-column prop="platformDescribe" label="平台描述" width="400px"></el-table-column>
                    <el-table-column prop="state" label="平台状态" :filters="[{ text: '关闭', value: '0' }, { text: '正常', value: '1' }]"
                        :filter-method="filterTag" filter-placement="bottom-end">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.state === '0' ? 'danger' : 'success'" disable-transitions>
                                {{scope.row.state === '0' ? '关闭' : '正常'}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑应用</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col class="page">
                <el-pagination background layout="prev, pager, next" :total="total" :page-size="queryParams.pageSize" :current-page="queryParams.currentPage"></el-pagination>
            </el-col>
        </el-row>

        <!-- 应用列表对话框 -->
        <el-dialog title="编辑应用" :visible.sync="appOuterVisible">
            <!-- 嵌套对话框 -->
             <el-dialog
                title="应用信息"
                class="appInnerVisible"
                :visible.sync="appInnerVisible"
                append-to-body>
                
                <el-form ref="childrenForm" :model="childrenApplication">
                    <el-form-item label="应用名称" prop="name" :rules="[{ required: true, message: '应用名称不能为空'}]">
                        <el-input v-model="childrenApplication.name" ></el-input>
                    </el-form-item>
                    <el-form-item label="应用代码" prop="code" :rules="[{ required: true, message: '应用代码不能为空'}]">
                        <el-input v-model="childrenApplication.code" ></el-input>
                    </el-form-item>
                    <el-form-item label="应用地址" prop="url" :rules="[{ required: true, message: '应用地址不能为空'}]">
                        <el-input v-model="childrenApplication.url" ></el-input>
                    </el-form-item>
                    <el-form-item label="有效状态" prop="state" :rules="[{ required: true, message: '请选择有效状态'}]">
                        <el-radio v-model="childrenApplication.state" label="0">无效</el-radio>
                    <el-radio v-model="childrenApplication.state" label="1">有效</el-radio>
                    </el-form-item>
                </el-form>
                
                <span slot="footer" class="dialog-footer">
                    <el-button @click="appInnerVisible = false" size="small">取 消</el-button>
                    <el-button type="primary" @click="editSubmit('childrenForm')" size="small">确 定</el-button>
                </span>
            </el-dialog>

            <el-button type="primary" size="small">添加应用</el-button>
            <hr style="margin-top: 10px;margin-bottom: 10px">
            <el-tree
                :data="applications"
                node-key="id"
                default-expand-all
                draggable
                :expand-on-click-node="false"
                :allow-drop="allowDrop"
                :allow-drag="allowDrag">

                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ data.name }}</span>
                    <span>
                        <el-button type="text" size="mini" @click="() => query(data)">
                            <i class="el-icon-search"></i>
                            查看
                        </el-button>
                        <el-button type="text" size="mini" @click="() => edit(data)">
                            <i class="el-icon-edit"></i>
                            编辑
                        </el-button>
                        <el-button type="text" size="mini" @click="() => append(data)">
                            <i class="el-icon-circle-plus-outline"></i>
                            添加应用
                        </el-button>
                        <el-button type="text" size="mini" @click="() => remove(node, data)">
                            <i class="el-icon-delete-solid"></i>
                            删除
                        </el-button>
                    </span>
                </span>
            </el-tree>

            <span slot="footer" class="dialog-footer">
                <el-button @click="appOuterVisible = false">取 消</el-button>
                <el-button type="primary" @click="appOuterVisible = false">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
import { getPlatformList } from "@/api/application";
let id = 1000;
export default {
    data() {
        return {
            pageSizes: [
                { value: '5', label: '5' },
                { value: '10', label: '10' },
                { value: '20', label: '20' },
                { value: '30', label: '30' },
                { value: '50', label: '50' }
            ],
            queryParams: {
                pageSize: 5,
                currentPage: 1,
                platformName: ''
            },
            total: 0,
            platforms: [],
            appOuterVisible: false,
            appInnerVisible: false,
            applications: [
                {
                    id: 1,
                    name: '一级 1',
                    url: '',
                    children: [{
                        id: 4,
                        name: '二级 1-1',
                        url: '',
                        children: [{
                            id: 9,
                            name: '三级 1-1-1',
                            url: '/test1',
                        }, {
                            id: 10,
                            name: '三级 1-1-2',
                            url: '/test2',
                        }]
                    }]
                }, {
                    id: 2,
                    name: '一级 2',
                    url: '',
                    children: [{
                        id: 5,
                        name: '二级 2-1',
                        url: '/test3',
                    }, {
                        id: 6,
                        name: '二级 2-2',
                        url: '/test4',
                    }]
                }, {
                    id: 3,
                    name: '一级 3',
                    url: '',
                    children: [{
                        id: 7,
                        name: '二级 3-1',
                        url: '/test5',
                    }, {
                        id: 8,
                        name: '二级 3-2',
                        url: '/test6',
                    }]
                }
            ],
            childrenApplication: {
            }
        }
    },
    rules: {
        name: [
            { required: true, message: '请输入应用名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
    },
    methods: {
        /* 标签筛选 */
        filterTag(value, row) {
            return row.state === value;
        },
        /* 编辑应用 */
        handleEdit(index, row) {
            this.appOuterVisible = true;
        },
        /* 表格状态 */
        tableRowClassName({row, rowIndex}) {
            if (row.state === '0') {
                return 'warning-row';
            } else {
                return '';
            }
        },
        /* 查看应用 */
        query(data) {
            this.appInnerVisible = true;
        },
        /* 编辑应用 */
        edit(data) {
            this.appInnerVisible = true;           
        },
        /* 编进应用-确认 */
        editSubmit(childrenForm) {
            this.$refs[childrenForm].validate((valid) => {
                if (valid) {
                    alert('submit!');
                    this.appInnerVisible = false
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        /* 添加应用 */
        append(data) {
            const newChild = { id: id++, name: 'testtest', children: [] };
            if (!data.children) {
                this.$set(data, 'children', []);
            }
            data.children.push(newChild);
        },
        /* 删除应用 */
        remove(node, data) {
            const parent = node.parent;
            const children = parent.data.children || parent.data;
            const index = children.findIndex(d => d.id === data.id);
            children.splice(index, 1);
        },
        /* 对话框拖拽 */
        allowDrop(draggingNode, dropNode, type) {
            if (dropNode.data.name === '二级 3-1') {
                return type !== 'inner';
            } else {
                return true;
            }
        },
        allowDrag(draggingNode) {
            return draggingNode.data.name.indexOf('三级 3-2-2') === -1;
        }

    },
    mounted() {
        /* 平台应用管理-查询平台列表 */
        getPlatformList(this.queryParams.pageSize, this.queryParams.currentPage, this.queryParams.platformName).then(Response => {
            const resp = Response.data
            const data = resp.data
            if (resp.flag) {
                this.total = data.total;
                this.platforms = data.platforms;
            } else {
                this.$message.error("平台列表获取失败")
            }
        })
    }
}
</script>
<style lang="scss">
    /* 内嵌对话框 */
    .appInnerVisible {
        .el-dialog {
            width: 420px;

            /* 标题主体间距 */
            .el-dialog__header {
                padding: 20px 20px 10px;
            }
            .el-dialog__body {
                padding: 0px 20px 20px;
            }
        }
        
    }
    /* 页面样式 */
    .applicationManage {
        /* 对话框样式 */

        
        .el-dialog {
            width: 80%;
            
            /* 操作列样式 */
            .custom-tree-node {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                padding-right: 8px;
            }
        }
        

        background-color: #ffffff;
        .el-col {
            margin-top: 20px;
        }

        .param {
            /* 每页记录下拉框样式 */
            .el-select {
                margin-left: 2%;
                margin-right: 10px;
                width: 100px;
            }
            /* 下拉框藐视 */
            span {
                color:#909399;
            }
            /* 查询搜索框 */
            .input-with-select {
                width: 300px;
                float: right;
                margin-right: 2%;
            }
        }

        /* 表格样式 */
        .el-table {
            border: 1px solid #E9EEF3;
            width: 96%;
            margin-left: 2%;
            /* 表格操作按钮 */
            .el-button {
                border: 1px solid #FFF;
            }
            /* 表格状态颜色 */
            .warning-row {
                background: oldlace;
            }
        }

        /* 分页样式 */
        .page {
            text-align: right;
            margin-bottom: 20px;

            .el-pagination {
                 margin-right: 2%;
            }
        }
    }
</style>
